<template>
  <div class="text-toolbar">
    <div class="toolbar-group">
      <label>字体：</label>
      <select v-model="fontFamily" @change="handleChange">
        <option value="Arial">Arial</option>
        <option value="Microsoft YaHei">微软雅黑</option>
        <option value="SimSun">宋体</option>
      </select>
    </div>
    <div class="toolbar-group">
      <label>字号：</label>
      <input type="number" v-model.number="fontSize" min="8" max="72" @change="handleChange">
    </div>
    <div class="toolbar-group">
      <label>颜色：</label>
      <input type="color" v-model="color" @change="handleChange">
    </div>
    <div class="toolbar-group">
      <label>背景色：</label>
      <input type="color" v-model="background" @change="handleChange">
    </div>
    <div class="toolbar-group">
      <button class="format-btn" :class="{ active: isBold }" @click="toggleFormat('bold')">B</button>
      <button class="format-btn" :class="{ active: isItalic }" @click="toggleFormat('italic')">I</button>
      <button class="format-btn" :class="{ active: isUnderline }" @click="toggleFormat('underline')">U</button>
      <button class="format-btn" :class="{ active: isStrike }" @click="toggleFormat('strike')">S</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs, computed } from 'vue'

// 接收父组件传递的元素
const props = defineProps<{
  element: any
}>()
const emit = defineEmits<{
  (e: 'update-element', id: string, payload: Partial<any>): void
}>()

// 解构元素属性
const { id, defaultStyle, delta } = toRefs(props.element)
const fontFamily = ref(defaultStyle.value.fontFamily)
const fontSize = ref(defaultStyle.value.fontSize)
const color = ref(defaultStyle.value.color)
const background = ref(defaultStyle.value.background)

// 格式化状态（后续成员C完善Delta解析逻辑）
const isBold = ref(false)
const isItalic = ref(false)
const isUnderline = ref(false)
const isStrike = ref(false)

// 处理基础样式变化
const handleChange = () => {
  emit('update-element', id.value, {
    defaultStyle: {
      fontFamily: fontFamily.value,
      fontSize: fontSize.value,
      color: color.value,
      background: background.value
    }
  })
}

// 切换文本格式（B/I/U/S，后续成员C完善）
const toggleFormat = (format: 'bold' | 'italic' | 'underline' | 'strike') => {
  // 后续解析Delta并更新格式
  console.log('切换格式：', format)
}
</script>

<style scoped>
.text-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.toolbar-group select, .toolbar-group input {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.toolbar-group input[type="number"] {
  width: 60px;
}

.format-btn {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.format-btn.active {
  background-color: #42b983;
  color: #fff;
}
</style>